<template>
    <div style="display: flex;justify-content: center">
        <el-card class="box-card" style="margin-top: 16px">
            <el-row>
                <el-col :span="24" style="margin-top: 8px">
                    <el-select v-model="bk_biz_id" placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in bk_business_options"
                                :key="item.bk_biz_id"
                                :label="item.bk_biz_name"
                                :value="item.bk_biz_id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="24" style="margin-top: 8px">
                    <el-select v-model="script_id" placeholder="请选择" style="width: 100%" @change="get_script">
                        <el-option
                                v-for="item in scripts"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="24" style="margin-top: 8px">
                    <el-input v-model="arg" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="24" style="margin-top: 8px">
                    <el-button type="success">执行</el-button>
                </el-col>
                <el-col :span="12">
                    <el-table
                            :data="all_hosts"
                            style="width: 100%"
                    >
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="序号"
                                width="180"
                                align="center">
                            <template slot-scope="scope">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.date }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="内网IP"
                                width="180"
                                align="center">
                            <template slot-scope="scope">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.date }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作系统"
                                width="180"
                                align="center">
                            <template slot-scope="scope">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.date }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                bk_biz_id: '',
                bk_business_options: [],
                bk_job_id: '',
                bk_job_options: [],
                script_id: '',
                scripts: [],
                arg: '',
                all_hosts: []
            }
        },
        mounted() {
            this.get_bk_business()
            this.get_all_script()
        },
        methods: {
            get_bk_business() {
                this.$http.get('/api/search_business').then((res) => {
                    this.bk_business_options = res.data.info.data.info
                })
            },
            get_job_list() {
                this.$http.get(`/api/get_job_list?bk_biz_id=${this.bk_biz_id}`).then((res) => {
                    this.bk_job_options = res.data.info.data
                })
            },
            get_job_detail() {
                this.$http.get(`/api/get_job_detail?bk_biz_id=${this.bk_biz_id}&bk_job_id=${this.bk_job_id}`).then((res) => {
                    console.log(res)
                })
            },
            get_all_script() {
                this.$http.get(`/api/get_all_scripts`).then((res) => {
                    this.scripts = res.data.info
                })
            },
            get_script() {
                this.$http.get(`/api/get_script?script_id=${this.script_id}`).then((res) => {
                    this.arg = res.data.info.argument
                })
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
